<!-- 导航栏组件 -->
<style lang="scss" scoped>
    // 样式私有化
    .navgaitor,
    .navgaitorFiexd{
        width: 100vw;
        height: 46px;
        line-height: 46px;
        padding: 0 5%;
        background-color: rgb(50, 134, 255);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        color: #fff;
        .left{
            width: 30px;
            position: relative;
            span{
                &::after{
                    position: absolute;
                    content: '';
                    width: 9px;
                    height: 9px;
                    border-left: 2px solid #fff;
                    border-bottom: 2px solid #fff;
                    top: 20px;
                    transform: rotate(45deg);
                }
                &:active{
                    &::after {
                        border-color: #999;
                    }
                }
            }
        }
        .right{
            min-width: 32px;
        }
    }
    .navgaitorFiexd{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
    }
</style>
<template>
    <div :class=" {
        navgaitor: !isFixed,
        navgaitorFiexd: isFixed
    }" :style="navStyle">
        <div class="left" @click="back()">
            <span v-if="isBack"></span>
        </div>
        <div class="center">
            {{ text }}
        </div>
        <div class="right" @click="btnClick()">
            <span v-if="isBtn" :style="btnStyle">
                {{ btnText }}
            </span>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'navgaitor',
        props: {
            // 是否固定任务栏
            isFixed: {
                type:Boolean,
                default: false
            },
            // 导航栏的样式
            navStyle: {
                type: [String,Object],
                default: ''
            },
            // 中间标题的文字
            text: {
                type: String,
                default: '标题'
            },
            // 是否显示左边的返回按钮
            isBack: {
                type: Boolean,
                default: true
            },
            // 是否显示右边的按钮
            isBtn: {
                type: Boolean,
                default: false
            },
            // 右边按钮的文字
            btnText: {
                type: String,
                default: '保存'
            },
            // 右边按钮的样式
            btnStyle: {
                type: [String,Object],
                default: ''
            }
        },
        methods:{
            back(){
                // 触发自定义事件的前提 是显示返回按钮
                if(this.isBack){
                    // 直接返回上一个路由
                    // 使用vue路由实例里面的back方法
                    this.$router.back()
                }
            },
            btnClick(){
                if(this.isBtn){
                    this.$emit('click')
                }
            }
        }
    }
</script>